<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="fontawesome.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bulma.min.css">
    <title>Title</title>
</head>
<body>
<section class="section">
    <div class="container is-fluid">
        <h1 class="title">
            Hello World中国
        </h1>
        <p class="subtitle">
            次级标的 <strong>Bulma</strong>!
        </p>
        <div class="columns">
            <div class="column ">
              <div class="">
                  <a class="button">
                      Button
                  </a>
                  <a class="button is-primary">
                      Button
                  </a>
                  <a class="button is-link">
                      Button
                  </a>
                  <a class="button is-info">
                      Button
                  </a>
                  <a class="button is-success">
                      Button
                  </a>
                  <a class="button is-warning">
                      Button
                  </a>
                  <a class="button is-danger">
                      Button
                  </a>
                  <a class="button is-small">
                      Button
                  </a>
                  <a class="button is-medium">
                      Button
                  </a>
                  <a class="button is-large">
                      Button
                  </a>
                  <a class="button is-primary is-outlined">
                      Button
                  </a>
                  <a class="button is-loading">
                      Button
                  </a>
                  <a class="button" disabled>
                      Button
                  </a>
                  <button class="button is-white">White</button>
                  <button class="button is-light">Light</button>
                  <button class="button is-dark">Dark</button>
                  <button class="button is-black">Black</button>
                  <button class="button is-text">Text</button>
                  <button class="button is-ghost">Ghost</button>

                  <div class="buttons">
                      <button class="button is-primary is-light">Primary</button>
                      <button class="button is-link is-light">Link</button>
                  </div>

                  <div class="buttons">
                      <button class="button is-info is-light">Info</button>
                      <button class="button is-success is-light">Success</button>
                      <button class="button is-warning is-light">Warning</button>
                      <button class="button is-danger is-light">Danger</button>
                  </div>

                  <button class="button is-fullwidth">全屏按钮</button>

                  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
                  </button>

                  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
                      <span>GitHub</span>
                  </button>


              </div>
            </div>
            <div class="column">
                <div class="block">
                    This text is within a <strong>block</strong>.
                </div>
                <div class="box">
                    I'm in a box.
                </div>

                <span class="tag is-success">Success</span>
                <span class="tag is-warning">Warning</span>
                <span class="tag is-danger">Danger</span>

                <progress class="progress" value="15" max="100">15%</progress>

            </div>
            <div class="column">
                <div class="content is-small">内容</div>
                <div class="content is-medium">内容</div>
                <div class="content is-large">内容</div>

                <div class="block">
  <span class="tag is-success">
    Hello World
    <button class="delete is-small"></button>
  </span>
                </div>

                <div class="notification is-danger">
                    <button class="delete"></button>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
                </div>

                <article class="message is-info">
                    <div class="message-header">
                        Info
                        <button class="delete"></button>
                    </div>
                    <div class="message-body">
                        Lorem ipsum dolor sit amet.
                    </div>
                </article>

                <figure class="image is-128x128">
                    <img src="https://bulma.zcopy.site/images/placeholders/128x128.png">
                </figure>
                <figure class="image is-128x128">
                    <img class="is-rounded" src="https://bulma.zcopy.site/images/placeholders/128x128.png">
                </figure>

                <div class="notification is-primary">
                    <button class="delete"></button>
                    Primar lorem ipsum dolor sit amet, consectetur
                    adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
                </div>
            </div>
            <div class="column">
                第四列
            </div>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="container">
        <div class="content has-text-centered">
            <p>
                <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
                <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
                is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
            </p>
        </div>
    </div>
</footer>
</body>
</html>